<template>
  <view
    class="pop"
    :class="{
      'pop-left': type === 'left',
      'pop-right': type === 'right',
    }"
  >
    <image
      :src="staticUrl('/static/images/pop.png')"
      mode="scaleToFill"
    />
    <view class="pop-body">
      <slot></slot>
    </view>
  </view>
</template>

<script>
  export default {
    name: "Pop",
    props: {
      type: {
        type: String,
        default: "left", // left, right
      },
    },
    data() {
      return {};
    },
    methods: {},
  };
</script>

<style lang="scss" scoped>
  .pop {
    position: relative;
    width: 173rpx;
    height: 173rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    image {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
    }

    &-left {
      image {
      }
    }

    &-right {
      image {
        // 水平翻转
        transform: rotateY(180deg);
      }
    }

    &-body {
      position: absolute;
      z-index: 2;
      left: 50%;
      top: 50%;
      transform: translateY(-50%) translateX(-50%);
    }
  }
</style>
